<template>
	<view class="content">
		<view class="login-logo">
			<image class="login-logo-image" src="/static/logo_abf.png" mode=""></image>
		</view>
		<!-- <view class="tips">
			<text class="">联营商实名注册表示同意爱八方产品联营协议及隐私政策</text>
		</view> -->
		<view class="login-form">
			<view class="uni-form-item uni-column po">
				<input class="uni-input" v-model="mobile" type="number" placeholder-style="color:#cacaca" placeholder="请输入手机号" />
			</view>
			<view class="uni-form-item uni-column po">
				<input class="uni-input" v-model="password" password type="text" placeholder-style="color:#cacaca" placeholder="请输入密码" />
			</view>
			<!-- <view class="login-form-checkbox">
				<checkbox-group  @change="onCheckbox">
					<label>
						<checkbox value="cb" style="transform:scale(0.6)" color="#e83e41" :checked="is_checkbox" />注册/登陆即代表同意
					</label>
					<text class="login-form-link"  @click="protocol">《爱八方产品经销合同》</text>
				</checkbox-group>				
			</view> -->
			<!-- <view class="login-form-checkbox">
				<checkbox-group  @change="onCheckbox">
					<label>
						<checkbox value="cb" style="transform:scale(0.6)" color="#e83e41" :checked="is_checkbox" />注册/登陆即代表同意
					</label>
					<text class="login-form-link"  @click="open('/pages/privacy/privacy')">《隐私政策》</text>
					<text class="login-form-link"  @click="open('/pages/page/page')">《用户协议》</text>
				</checkbox-group>				
			</view> -->
			<view class="">
				<view class="login-form-btn" @click="post" :class="[disabled ? '' : 'disabled']">登录</view>				
			</view>
			<!-- #ifdef APP-PLUS -->
				<view class="">
					<view class="login-form-btn" style="margin-top: 40upx;" @click="register">注册新账号</view>				
				</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
				<view class="" v-show="is_code">
					<view class="login-form-btn" style="margin-top: 40upx;" @click="register">注册新账号</view>				
				</view>
			<!-- #endif -->
			<view class="login-form-tips">
				<text @click="codeLogin">手机快捷登录</text> | <text @click="reset">忘记密码</text>
			</view>
			<!-- #ifdef APP-PLUS -->
				<view class="login-form-tips" v-if="is_weixin">
					<text @click="oauth('weixin')">第三方登录</text>
				</view>
				<view class="oauth" v-if="is_weixin">
					<image @click="oauth('weixin')" src="../../../static/wei.png"></image>
				</view>
			<!-- #endif -->	
		</view>
	</view>
</template>

<script>
	import {
        mapState,
        mapMutations
    } from 'vuex'
	
	export default {
		computed: {
			...mapState(['version','SystemInfo']),
		},
		data() {
			return {
				mobile: '',
				password: '',
				disabled:false,
				// is_checkbox: false,
				is_code: true,
				openid: null,
				unionid: null,
				is_weixin: false
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/login/register/register'
			});
		},
		onLoad() {
			// #ifdef H5
			// if(localStorage.getItem("share_invitation_code")){
			// 	this.is_code = true
			// }else{
			// 	this.is_code = false
			// }
			// #endif
			
			// #ifdef APP-PLUS
				if(Date.parse(new Date())/1000 >  1598341528){
					this.is_weixin = this.isInstalled('weixin')
				}
			// #endif
		},
		onShow() {
			//this.logout()
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest','login','logout']),
			// 判断本地是否安装客户端
			isInstalled(id){
				// ios
				if(this.SystemInfo.platform && this.SystemInfo.platform == 'ios'){
					switch (id) {
						case "qq":
							var TencentOAuth = plus.ios.import("TencentOAuth");
							return TencentOAuth.iphoneQQInstalled();
						case "weixin":
							var WXApi = plus.ios.import("WXApi");
							return WXApi.isWXAppInstalled()
						case "sinaweibo":
							var SinaAPI = plus.ios.import("WeiboSDK");
							return SinaAPI.isWeiboAppInstalled()
						default:
							break;
					}
				}
				// android
				if(this.SystemInfo.platform && this.SystemInfo.platform == 'android'){
					let main = plus.android.runtimeMainActivity();
					let packageManager = main.getPackageManager();
					let PackageManager = plus.android.importClass(packageManager)
					let packageName = {
					    "qq": "com.tencent.mobileqq",
					    "weixin": "com.tencent.mm",
					    "sinaweibo": "com.sina.weibo"
					}
					try {
					    return packageManager.getPackageInfo(packageName[id], PackageManager.GET_ACTIVITIES);
					} catch (e) {
					   // mui.toast(e)
					    console.log('未安装')
					}
				}
			},
			open(url) {
				uni.navigateTo({
					url: url
				});
			},
			post() {
				if(this.mobile.length != 11){ 
					uni.showToast({
						icon: 'none',
						title: "请输入正确的手机号码",
						position:'bottom'
					})
					return false; 
				}
				if(!this.password){ 
					uni.showToast({
						icon: 'none',
						title: "请输入密码",
						position:'bottom'
					})
					return false; 
				}
				/* if(!this.is_checkbox){ 
					uni.showToast({
						icon: 'none',
						title: "您必须同意爱八方产品经销合同",
						position:'bottom'
					})
					return false; 
				} */
				uni.showLoading({
					title: '登录中'
				});
				// 默认信息
				let data = {username: this.mobile,password:this.password,group:'wechat'}
				// app传入推送信息
				// #ifdef APP-PLUS
				let device_id = plus.push.getClientInfo().clientid,token_apn = plus.push.getClientInfo().token
				data = {username: this.mobile,password:this.password,group:'app',device_id:device_id,token_apn:token_apn,device:this.SystemInfo.platform,version:plus.runtime.version},
				// #endif
				this.vuexRequest({
					url: '/api/v2/site/login',
					method: 'POST',
					data: data,
					success: (res)  => {
						this.login(res.data.data.access_token)
						// #ifdef H5
						// 自动绑定微信
						this.bindAuth(res.data.data.access_token)
						this.setCookie('access-token',res.data.data.access_token,1000000)
						// #endif
						if(!this.openid){
							uni.hideLoading()
							uni.switchTab({
								url: '/pages/tabbar/mine/new-mine',
								success() {},
								fail(err) {
									console.log(err)
								}
							});
							return !1
						}
						// 第三方登录绑定
						let authdata = {
							'group': 'app',
							'oauth_client': 'wechat',
							'oauth_client_user_id': this.openid,
							'unionid': this.unionid
						}
						this.vuexRequest({
							url: '/api/v2/member/auth/bind?access-token=' + res.data.data.access_token,
							method: 'POST',
							data: authdata,
							success: (res)  => {
								console.log(res)
								uni.hideLoading()
								uni.switchTab({
									url: '/pages/tabbar/mine/new-mine',
									fail(err) {
										console.log(err)
									}
								});
							},
							fail: (err)  => {
								console.log(err)
								uni.showToast({
									icon: 'none',
									title: err.data.message,
									position:'bottom'
								})
							},
						})		
					},
					fail: (err)  => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
					},
				})
			},
			setCookie(cname, cvalue, exdays){
				let d = new Date();
				d.setTime(d.getTime() + (exdays*24*60*60*1000));
				let expires = "expires="+d.toUTCString();
				document.cookie = cname + "=" + cvalue + "; " + expires;
			},
			reset() {
				uni.navigateTo({
					url: '/pages/login/reset/reset'
				});
			},
			codeLogin() {
				uni.navigateTo({
					url: '/pages/login/code-login/code-login'
				});
			},
			protocol() {
				uni.navigateTo({
					url: '/pages/login/protocol/protocol'
				});
			},
			onCheckbox() {
				this.is_checkbox = !this.is_checkbox
			},
			register() {
				uni.navigateTo({
					url: '/pages/login/register/register',
					fail(err) {
						console.error(err)
					}
				});
			},
			oauth(id) {
				// #ifdef APP-PLUS
				uni.login({
				  provider: id,
				  success: (loginRes) => {
					console.log(loginRes.authResult);
					this.openid = loginRes.authResult.openid
					this.unionid = loginRes.authResult.unionid
					this.oauthLogin()
				  }
				});
				// #endif
			},
			oauthLogin() {
				if(!this.openid){
					uni.showToast({
						icon: 'none',
						title: 'openid不存在',
						position:'bottom'
					})
				}
				uni.showLoading({
					title: '登录中'
				});
				let data = {}
				
				// app传入推送信息
				// #ifdef APP-PLUS
				let device_id = plus.push.getClientInfo().clientid,token_apn = plus.push.getClientInfo().token
				data = {oauth_client: 'wechat',group:'app',oauth_client_user_id: this.openid,unionid:this.unionid,device_id:device_id,token_apn:token_apn,device:this.SystemInfo.platform,version:plus.runtime.version}
				// #endif
				
				this.vuexRequest({
					url: '/api/v2/site/auth-login',
					method: 'POST',
					data: data,
					success: (res)  => {
						this.login(res.data.data.access_token)
						uni.hideLoading()
						uni.switchTab({
							url: '/pages/tabBar/mine/new-mine'
						});
					},
					fail: (err)  => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
						uni.showActionSheet({
						    itemList: [ '登录已有账号绑定微信','注册新账号绑定微信'],
						    success: (res) => {
						        console.log(res.tapIndex);
								if(res.tapIndex == 1){
									uni.navigateTo({
										url: '/pages/login/register/register?openid=' + this.openid + '&unionid=' + this.unionid
									});
								}
						    },
						    fail: (res) => {
						        console.log(res.errMsg);
						    }
						});
					},
				})
			},
			bindAuth(access_token) {	// h5自动绑定微信
				let data = {oauth_client: 'wechat',group:'app'}
				this.vuexRequest({
					url: '/api/v2/member/auth/bind?access-token=' + access_token,
					method: 'POST',
					data: data,
					success: (res)  => {
						console.log('h5自动绑定微信')
					},
					fail: (err)  => {
						console.log(err)
					},
				})
			}
		},
		watch: {
			moblie () {
				if(this.moblie != '' && this.password != ''){
					this.disabled = true
				}else{
					this.disabled = false
				}
			},
			password(){
				if(this.moblie != '' && this.password != ''){
					this.disabled = true
				}else{
					this.disabled = false
				}
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
	.tips{
		text-align: center;
		font-size: 26upx;
		color: #e83e41;
		margin: 0 0 30upx 0 ;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.login-logo{
		text-align: center;
		padding: 60upx 0;
	}
	.login-logo-image{
		width: 153upx;
		height: 149upx;
		margin: 0 auto;
	}
	.login-form{
		width: 85%;
		margin: 0 auto;
	}
	.uni-input{
		padding-left: 0;
	}
	.login-form-checkbox {
		display: flex;
		padding:  20upx 0 0 0;
		font-size: 24upx;
		color: #cacaca;
		display: inline-flex;
	}
	uni-checkbox-group uni-label{
		padding: 0;
	}
	uni-radio-group, uni-checkbox-group{
		width: auto;
	}
	.login-form-link{
		color: #e83e41;
	}
	.login-form-btn{
		margin-top: 80upx;
		background: ;
		background-image: linear-gradient(to right, #f27072, #ea4a4c);
		text-align: center;
		border-radius: 200upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 32upx;
		color: #FFFFFF;
	}
	.login-form-btn.disabled{
		background: #f09596;
	}
	.login-form-tips{
		padding-top: 40upx;
		text-align: center;
		color: #979797;
	}
	.oauth{
		text-align: center;
		padding: 10upx 0 0 0;
	}
	.oauth image{
		width: 90upx;
		height: 90upx;
	}
</style>
